<template>
    <div v-if="show" class="loading-item">
        <div class="loading"></div>
    </div>
</template>

<script lang="ts" setup>
    import { onMounted, ref, watch } from 'vue';

    const props = defineProps<{ showLoading: boolean }>();
    const show = ref(false);

    onMounted(() => {
        show.value = props.showLoading;
    });

    watch(
        () => props.showLoading,
        (now) => {
            //关闭
            show.value = now;
        }
    );
</script>

<style scoped>
    .loading {
        display: block;
        position: relative;
        width: 6px;
        height: 10px;
        animation: rectangle infinite 1s ease-in-out -0.2s;
        background-color: #000;
        margin: auto;
    }

    .loading:before,
    .loading:after {
        position: absolute;
        width: 6px;
        height: 10px;
        content: '';
        background-color: #000;
    }

    .loading:before {
        left: -14px;

        animation: rectangle infinite 1s ease-in-out -0.4s;
    }

    .loading:after {
        right: -14px;

        animation: rectangle infinite 1s ease-in-out;
    }

    .loading-item {
        height: 100px;
        padding: 10px 20px 0;
        display: flex;
        align-items: center;
        margin: auto;
    }

    @keyframes rectangle {
        0%,
        80%,
        100% {
            height: 20px;
            box-shadow: 0 0 #000;
        }

        40% {
            height: 30px;
            box-shadow: 0 -20px #000;
        }
    }
</style>
